import React, { useState, useEffect, useRef } from 'react';
import { connect } from 'dva';
import { Tooltip, Row, Form, Input, Modal } from 'antd';
import SlickTable from '@/components/SlickTable';
import useSlickTableTemp from '@/hooks/useSlickTableTemp';

const namespace = 'busiComponent';

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 8 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};

// 判断空对象
const isEmptyObject = obj => {
  if (Object.keys(obj).length === 0) {
    return true;
  }
  return false;
};

function SelectBusiObj(props) {
  const [params, setParams] = useState({}); // 查询条件
  const [selectRow, setSelectRow] = useState({});

  const { tableProps } = useSlickTableTemp({ pageSize: 5 }, 'pmc/pms/busiObj/queryPage', params);

  const handleSearch = value => {
    setParams({
      ...params,
      gb_reset: true,
      busiObjNbrOrName: value,
    });
  };

  const handleSelectRows = record => {
    console.log(record);
    if (!isEmptyObject(record) && record.length > 0) {
      setSelectRow(record[0]);
    } else {
      setSelectRow({});
    }
  };

  const handleOk = () => {
    if (isEmptyObject(selectRow)) {
      Modal.warn({ content: '请先选中一个记录' });
      return;
    }
    const { selectBusiObjCallBack, handleVisibleFlag } = props;
    handleVisibleFlag(false);
    selectBusiObjCallBack(selectRow);
    setSelectRow({});
  };

  const handleCancel = () => {
    const { handleVisibleFlag } = props;
    handleVisibleFlag(false);
    setSelectRow({});
  };

  const cellStyle = {
    maxWidth: 200,
    overflow: 'hidden',
    whiteSpace: 'nowrap',
    textOverflow: 'ellipsis',
    cursor: 'pointer',
  };

  const columns = [
    {
      title: '业务对象名称',
      dataIndex: 'busiObjName',
      onCell: () => {
        return {
          style: cellStyle,
        };
      },
      render: text => (
        <Tooltip placement="topLeft" title={text}>
          {text}
        </Tooltip>
      ),
    },
    {
      title: '业务对象编码',
      dataIndex: 'busiObjNbr',
    },
    {
      title: '业务对象描述',
      dataIndex: 'busiObjDesc',
    },
  ];

  return (
    <Modal
      title="选择业务对象"
      visible={props.modalVisible}
      width="70%"
      destroyOnClose
      onCancel={() => {
        handleCancel();
      }}
      onOk={() => {
        handleOk();
      }}
    >
      <Form style={{ marginBottom: 10 }}>
        <Row>
          <Input.Search
            style={{ width: '40%' }}
            placeholder="业务对象名称、编码搜索"
            onSearch={handleSearch}
          />
        </Row>
      </Form>
      <SlickTable
        rowKey="busiObjId"
        columns={columns}
        {...tableProps}
        pick="radio"
        onSelectRow={handleSelectRows}
      />
    </Modal>
  );
}

export default connect(() => ({}))(Form.create()(SelectBusiObj));
